import {createElement, findDOMNode, Component} from 'rax';
import Touchable from 'rax-touchable';

import Nav from './../nav/index';

const menuStyles = {
    topView: {
      zIndex: 999,
      width: 750,
      position: 'fixed',
      top: 0,
      backgroundColor: '#ffffff',
    },
    view: {
      backgroundColor: '#ffffff',
    }
  };  

export default class MountingNavigation extends Component {

    constructor(props) {
      super(props);
      this.pageUtils = props.pageUtils;
      this.state = {
        visibility: true
      };
    }
  
    onAppear = () => {
      this.setState({
        visibility: true
      });
      this.pageUtils.pageEmitter && this.pageUtils.pageEmitter.emit('fixTop', { state: true });
      this.props.onUnmounting && this.props.onUnmounting();
    };
  
    onDisappear = (e) => {
      if (e.direction === 'up') {
        this.setState({
          visibility: false
        });
        this.pageUtils.pageEmitter && this.pageUtils.pageEmitter.emit('fixTop', { state: false });
        this.props.onMounting && this.props.onMounting();
      }
    };
  
    render() {
      const { height = 100, animated = false, children} = this.props;
      console.log("!this.state.visibility: ", !this.state.visibility);
      // const { topView, tipBox } = menuStyles;

  
      const appearProps = {
        style: {
          height: 1,
          width: 750,
        },
        onAppear: this.onAppear,
        onDisappear: this.onDisappear
      };
      const navProps = {
        animated,
        children
      };
      const noFixedProps = {
        ...navProps,
        style: {
          height,
          ...menuStyles.view,
        },
      };
      const fixedProps = {
        ...navProps,
        style: {
          height,
          ...menuStyles.topView,
        },
        isMount: false,
      };
      return ([
        <View {...appearProps}/>,
        !this.state.visibility ? <Nav {...fixedProps}/> : null,
        <Nav {...noFixedProps}/>,
      ]);
    }
  }
  